<template>
  <view>
    <toast ref="toast"/>
    <loading ref="loading" fullscreen/>

    <view class="me-container">
      <view class="upper-container">
        <image src="../../static/images/me-background.jpg" mode="aspectFill"/>
      </view>
      <view class="user-info-container">
        <view class="avatar-container">
          <view class="avatar">
            <image :src="userInfo.avatar" mode="aspectFill"></image>
          </view>
        </view>
        <view class="username-container">
          <view class="username">{{ userInfo.username }}</view>
        </view>
        <view class="sno-container">
          <view class="sno">{{ userInfo.sno }}</view>
        </view>
        <view class="number-container">
          <view class="item">
            <view class="number">{{ userInfo.following }}</view>
            <view class="description">关注</view>
          </view>
          <view class="item">
            <view class="number">{{ userInfo.followers }}</view>
            <view class="description">粉丝</view>
          </view>
          <view class="item">
            <view class="number">{{ userInfo.favorites }}</view>
            <view class="description">收藏</view>
          </view>
        </view>
      </view>
      <view class="menu-list-container">
        <view class="menu-item-container">
          <view>我的课程</view>
          <view>
            <u-icon name="file-text"></u-icon>
          </view>
        </view>
        <view class="menu-item-container">
          <view>我的消息</view>
          <view>
            <u-icon name="chat"></u-icon>
          </view>
        </view>
        <view class="menu-item-container">
          <view>编辑资料</view>
          <view>
            <u-icon name="edit-pen"></u-icon>
          </view>
        </view>
        <view class="menu-item-container">
          <view>退出账号</view>
          <view>
            <u-icon name="account"></u-icon>
          </view>
        </view>
      </view>
      <view class="bugless">
        - 巴格勒斯 Bugless 2021 -
      </view>
    </view>
    <u-tabbar v-model="currentTabPage" :list="tabbarList" active-color="#f4756b" inactive-color="#888"
              @change="changeTabPage"></u-tabbar>
  </view>
</template>

<script>
    import toast from '@/components/toast/toast.vue';
    import loading from '@/components/loading/loading.vue';

    export default {
        name: "me",
        components: {
            toast, loading,
        },
        data() {
            return {
                userInfo: {
                    username: '',
                    uid: 0,
                    avatar: '',
                    sno: '',
                    following: 0,
                    followers: 0,
                    favorites: 0
                },
                tabbarList: [
                    {
                        iconPath: "home",
                        selectedIconPath: "home-fill",
                        text: '社区',
                        customIcon: false,
                    },
                    {
                        iconPath: "bookmark",
                        selectedIconPath: "bookmark-fill",
                        text: '课程',
                        customIcon: false,
                    },
                    {
                        iconPath: "chat",
                        selectedIconPath: "chat-fill",
                        text: '消息',
                        customIcon: false,
                    },
                    {
                        iconPath: "account",
                        selectedIconPath: "account-fill",
                        text: '我的',
                        customIcon: false,
                    },
                ],
                currentTabPage: 3
            }
        },
        methods: {
            changeTabPage(index) {
                switch (index) {
                    case 0:
                        uni.redirectTo({
                            url: `/pages/home/home`
                        });
                        break;
                    case 1:
                        uni.redirectTo({
                            url: `/pages/class/class`
                        });
                        break;
                    case 2:
                        uni.redirectTo({
                            url: `/pages/chatList/chatList`
                        });
                        break;
                    case 3:
                        uni.redirectTo({
                            url: `/pages/me/me`
                        });
                        break;
                }
            }
        },
        mounted() {
            if (!uni.getStorageSync("cookie") || !uni.getStorageSync("cookieMain")) {
                uni.redirectTo({
                    url: '/pages/login/login'
                });
            }
            else {
                this.userInfo = {
                    username: 'Cowjiang',
                    uid: 5,
                    avatar: 'https://com-etw.oss-cn-guangzhou.aliyuncs.com/dynamic/12/88f319fea37e417e8194d5e7686f4e8e.jpg',
                    sno: '1940706103',
                    following: 0,
                    followers: 0,
                    favorites: 0
                };
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import 'me.scss';
</style>